<template>
	<view class="performance_index">
		<xbd-pages-content title="绩效管理">
		<template #content>
			<view class="content" :style="'minHeight:'+windowHeight+'px'">
				<view class="banner" >
					<image src="../../static/images/performance/perfBanner.png" mode=""></image>
				</view>
				<view class="body">
					<!-- <view class="box" @click="statistical">
						<view class="icon">
							<image src="../../static/images/performance/statistical.png" mode=""></image>
						</view>
						<text>统计报表</text>
					</view> -->
					<view class="box box_marg" @click="history">
						<view class="icon">
							<image src="../../static/images/performance/history.png" mode=""></image>
						</view>
						<text>填报历史</text>
					</view>
					<view class="box"  @click="approval">
						<view class="icon">
							<image src="../../static/images/performance/approval.png" mode=""></image>
						</view>
						<text>我的审批</text>
					</view>

				</view>
				<view class="bottom">
					<xbd-apply-card :cardIcon="require('../../static/images/performance/self.svg')"  :cardBg="require('.../../static/images/meal/blue.png')"  cardTag="个人绩效填报" @clickApplyCard="ordinary()" ></xbd-apply-card>
				</view>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				windowHeight:0,
				// permission: ['部门负责人'],
			};
		},
		methods: {
			// statistical() {
			// uni.navigateTo({
			// 			url:'./statistical',
			// 		})
			// },
			history() {
			uni.navigateTo({
						url:'./history',
					})
			},
			approval() {
					uni.navigateTo({
						url: './approval',
					})
			},
			ordinary() {
			uni.navigateTo({
						url:'./form?back=1',
					})
			}
		},
		computed: {
			// ...mapState(['userInfo']),
			// isShow() {
			// 	let flag = false;
			// 	for (let i = 0; i < this.userInfo.user_permission.length; i++) {
			// 		if (this.permission.indexOf(this.userInfo.user_permission[i]) !== -1) {
			// 			flag = true
			// 		}
			// 	}
			// 	return flag;
			// }
		},
		onLoad(){
			uni.getSystemInfo({
				     success:(res) =>{
						 this.windowHeight = res.windowHeight
				         console.log(this.windowHeight);
				     }
				 });
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
.banner{
	height: 140px;
	image{
		height: 140px;
		width: 100%;
	}
}
.body{
	display: flex;
	justify-content: space-between;
	background-color: #FFFFFF;
	box-sizing: border-box;
	margin: 5px 0;
	padding: 15px 130rpx;
	// .box_marg{
	// 	margin: 0 130rpx;
	// }
	.box{
		width: 180rpx;
		text-align: center;
		font-size: 32rpx;
		.icon{
			margin:0 auto;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin-bottom: 30rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		text{
			color: #999999;
			white-space:nowrap; 
			overflow:hidden; 
			text-overflow:ellipsis;
		}
	}
}
.bottom{
	flex: 1;
	background-color: #FFFFFF;
	padding: 30px 50rpx 0 50rpx;
}
</style>
